﻿@page
@model FytSoa.Web.Pages.FytAdmin.Sys.RoleMenuModel
@{
ViewData["Title"] = "角色分配功能模块";
Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
    .layui-table-view {
        margin-top: 0px;
    }

    .layui-col-220 {
        width: 300px;
    }

    .right-col-body {
        left: 300px;
    }

    .list-wall {
        padding-top: 0px;
    }

    .fyt-center {
        padding-top:6px;
        text-align: center;
    }

    #tree {
        height: 550px;
        overflow: auto;
    }

    .layui-layer-loading {
        box-shadow: 0 0px 0px rgba(0, 0, 0, .3) !important;
    }

    #open-form {
        display: none;
    }

    .layui-form-select dl {
        max-height: 150px;
    }
    .tips{
        background-color: #fdf6ec;
        color: #e6a23c;
        padding:10px 15px;
        margin-bottom:15px;
        box-sizing: border-box;
        border-radius: 4px;
        font-size:13px;
    }
    .tips i{
        margin-right:5px;
        position:relative;
        top:1px;
    }
</style>
<div class="layui-col-220 fyt-wall">
    <div id="tree" class="layui-tree-cus" style="overflow:auto;"></div>
    <div class="fyt-center"><button class="layui-btn" data-type="saveMenu" type="button">保存菜单权限</button></div>
</div>
<div class="right-col-body fyt-wall">
    <div class="list-wall" style="padding-top:10px;">
        <div class="tips">
            <i class="layui-icon layui-icon-tips"></i>只有被授权的菜单权限，才能查看具体的按钮功能。
        </div>
        <table class="layui-hide" id="tablist" lay-filter="tool"></table>
    </div>
</div>
<script>
    layui.config({
        base: '/themes/js/modules/'
    }).use(['table', 'layer', 'jquery', 'tree', 'common'],
        function () {
            var table = layui.table,
                layer = layui.layer,
                $ = layui.jquery,
                tree = layui.tree,
                os = layui.common,
                form = layui.form;
            table.render({
                elem: '#tablist',
                headers: os.getToken(),
                url: '/api/menu/bycode',
                cols: [
                    [
                        { field: 'name', title: '菜单名称', sort: true, fixed: 'left' },
                        { field: 'codeType', title: '功能值' },
                        { width: 100, title: '操作', templet: '#tool' }
                    ]
                ],
                page: false,
                id: 'tables'
            });
            var guid = '', selText = '', layuiIndex = '', selectIds = '', active = {
                initTree() {
                    os.ajax('api/menu/menubyrole/', { roleGuid: '@Model.roleGuids' }, function (res) {
                        tree.render({
                            elem: '#tree'
                            , data: res.menu
                            , id: "treeId"
                            , showCheckbox: true
                            , onlyIconControl: true
                            , click: function (obj) {
                                guid = obj.data.id;
                                active.reload();
                            }
                        });
                    });
                },
                reload: function () {
                    table.reload('tables',
                        {
                            where: {
                                role: '@Model.roleGuids',
                                menu: guid
                            }
                        });
                },
                saveMenu: function () {
                    var checkedData = tree.getChecked('treeId');
                    if (checkedData.length == 0) {
                        os.warning('请选择授权的功能模块~');
                        return;
                    }
                    selectIds = '';
                    var strMenu = active.serverArray(checkedData);
                    //console.log(active.serverArray(checkedData)); return;
                    //开始提交信息
                    var index = layer.load(1, {
                        shade: [0.1, '#fff']
                    });
                    os.ajax("api/rolemenu/add", { RoleGuid: "@Model.roleGuids", MenuGuid: strMenu, Types: 1 }, function (res) {
                        layer.close(index);
                        if (res.statusCode === 200) {
                            os.success('授权成功~');
                        } else {
                            os.error(res.message);
                        }
                    });
                },
                serverArray(arr) {
                    for (var item = 0; item < arr.length; item++) {
                        selectIds += arr[item].id + ",";
                        if (arr[item].children) {
                            active.serverArray(arr[item].children)
                        }
                    }
                    return selectIds
                }
            };
            active.initTree();
            $('.fyt-wall .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听授权操作
            form.on('switch(torole)', function (obj) {
                var strRole = this.value;
                //开始提交信息
                var index = layer.load(1, {
                    shade: [0.1, '#fff']
                });
                var data = {
                    role: '@Model.roleGuids',
                    menu: guid,
                    btnfun: strRole,
                    status: obj.elem.checked ? 1 : 0
                };
                os.ajax("api/rolemenu/tubtnfun", data, function (res) {
                    layer.close(index);
                    if (res.statusCode === 200) {
                        if (obj.elem.checked) {
                            os.success('授权成功~');
                        }
                        else {
                            os.success('取消授权~');
                        }
                    } else {
                        os.error(res.message);
                        if (obj.elem.checked) {
                            obj.elem.checked = false;
                        } else {
                            obj.elem.checked = true;
                        }
                    }
                });
            });
        });
</script>
<script type="text/html" id="tool">
    <input type="checkbox" name="status" value="{{d.guid}}" lay-skin="switch" lay-text="取消|授权" lay-filter="torole" {{ d.status ? 'checked' : '' }}>
</script>